$sprite: (
	icon-career: (
		offset-x: 0px,
		offset-y: -132px,
		width: 26px,
		height: 26px,
		total-width: 254px,
		total-height: 158px,
		image: 'sprite.png'
	),
	icon-env: (
		offset-x: -36px,
		offset-y: -132px,
		width: 26px,
		height: 26px,
		total-width: 254px,
		total-height: 158px,
		image: 'sprite.png'
	),
	icon-sign-in: (
		offset-x: 0px,
		offset-y: 0px,
		width: 122px,
		height: 122px,
		total-width: 254px,
		total-height: 158px,
		image: 'sprite.png'
	),
	icon-sign-out: (
		offset-x: -132px,
		offset-y: 0px,
		width: 122px,
		height: 122px,
		total-width: 254px,
		total-height: 158px,
		image: 'sprite.png'
	),
	icon-skill: (
		offset-x: -72px,
		offset-y: -132px,
		width: 26px,
		height: 26px,
		total-width: 254px,
		total-height: 158px,
		image: 'sprite.png'
	),
);


@mixin sprite-size($image) {
	background-size: map-get(map-get($sprite, $image), 'total-width') map-get(map-get($sprite, $image), 'total-height');
}

@mixin sprite-width($image) {
	width: map-get(map-get($sprite, $image), 'width');
}

@mixin sprite-height($image) {
	height: map-get(map-get($sprite, $image), 'height');
}

@mixin sprite-position($image) {
	background-position: map-get(map-get($sprite, $image), 'offset-x') map-get(map-get($sprite, $image), 'offset-y');
}

@mixin sprite-image($image) {
	background-image: url('../images/'+map-get(map-get($sprite, $image), 'image'));
}

@mixin sprite-image-retina($image) {
	$image-path: '../images/'+map-get(map-get($sprite, $image), 'image');
	$image-path-retina: str-slice($image-path, 1, str-index($image-path, '.png') - 1) + '@2x.png';

	background-image: url($image-path-retina);
}

@mixin sprite($image, $size: true) {
	@include sprite-image($image);
	@include sprite-position($image);
	background-repeat: no-repeat;

	@if $size {
		@include sprite-width($image);
		@include sprite-height($image);
	}

	@media
		only screen and (-webkit-min-device-pixel-ratio: 2),
		only screen and (   min--moz-device-pixel-ratio: 2),
		only screen and (     -o-min-device-pixel-ratio: 2/1),
		only screen and (        min-device-pixel-ratio: 2),
		only screen and (                min-resolution: 192dpi),
		only screen and (                min-resolution: 2dppx) {

		@include sprite-size($image);
		@include sprite-image-retina($image);

	}
}

